<template>
  <el-dialog
    v-model="dialogVisible"
    title="重置密码"
    width="400"
    :before-close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    draggable
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="70px"
      class="demo-ruleForm"
      :rules="rules"
      status-icon
    >
      <el-form-item label="账号" prop="account">
        <el-input v-model="ruleForm.account" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="旧密码" prop="old">
        <el-input
          v-model.trim="ruleForm.old"
          type="password"
          show-password
          placeholder="请输入旧密码"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="new">
        <el-input
          v-model.trim="ruleForm.new"
          type="password"
          show-password
          placeholder="请输入新密码"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="flex_center">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { gp } from '~/library/plugins/vab'
  import { resetAccount } from '~/src/api/dms/home/homeCustomer'

  defineOptions({
    name: 'PesetPwdDialog',
  })

  /***
   * @var
   */
  const dialogVisible = ref(false)
  const ruleForm = ref<any>({
    account: '',
    old: '',
    new: '',
  })
  const ruleFormRef = ref()

  const rules = {
    account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
    old: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
      { min: 6, message: '密码长度不能低于六位', trigger: 'blur' },
    ],
    new: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
      { min: 6, message: '密码长度不能低于六位', trigger: 'blur' },
    ],
  }

  /**
   * @method
   */

  const emit = defineEmits(['refreshPage'])

  const open = ({ account }: any) => {
    dialogVisible.value = true
    ruleForm.value.account = account
  }

  const close = () => {
    dialogVisible.value = false
  }

  // 提交
  const handleConfirm = () => {
    ruleFormRef.value.validate((valid: any, fields: any) => {
      if (!valid) return

      resetAccount(ruleForm.value).then((res) => {
        gp.$baseMessage('重置密码成功!', 'success', 'hey')
        close()
        emit('refreshPage')
      })
    })
  }

  defineExpose({
    open,
  })
</script>
<style scoped>
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  .tree {
    width: 100%;
    height: 250px;
    padding: var(--el-padding);
    overflow-y: auto;
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-base);
  }
</style>
